<!-- 需求信息 -->
<template>
	<view class="container">
		<view class="content">
			<text class="title">需求信息</text>
			<view class="list">
				<view class="list-item show-right-icon">
					<text class="label">需求类型：</text>
					<picker class="picker" @change="handleTabChange" :value="tabIndex" :range="tabArray"
						range-key="label">
						<view class="value" v-if="tabArray[tabIndex]">{{tabArray[tabIndex].label}}</view>
						<view class="value placeholder" v-else>请选择</view>
					</picker>
				</view>
				<view class="list-item">
					<text class="label">需求名称：</text>
					<input class="input" type="text" v-model="formData.name" placeholder="请输入"
						placeholder-style="color: #999;" />
				</view>
				<view class="list-item" v-if="formData.category == '1'">
					<text class="label">作业面积：</text>
					<input class="input" type="digit" v-model="formData.area" @blur="formatDigit($event, 'area')"
						placeholder="请输入" placeholder-style="color: #999;" />
					<text class="unit">亩</text>
				</view>
				<view class="list-item" v-if="formData.category == '1'">
					<text class="label">价格预算：</text>
					<input class="input" type="digit" v-model="formData.budget" @blur="formatDigit($event, 'budget')"
						placeholder="请输入" placeholder-style="color: #999;" />
					<text class="unit">元/亩</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, watchEffect } from 'vue';
	import { storeToRefs } from 'pinia';
	import { usePostNeedStore } from '../store.js';

	const store = usePostNeedStore();
	const { formData } = storeToRefs(store);

	const tabArray = ref([
		{ label: '找飞防', value: '1' },
		{ label: '找专家', value: '2' },
		{ label: '找药剂', value: '3' },
	]);
	const tabIndex = ref(-1);

	// 处理传入的需求类型
	watchEffect(() => {
		tabIndex.value = tabArray.value.findIndex(item => item.value == formData.value.category);
	});

	// 选择需求类型后
	const handleTabChange = (e) => {
		tabIndex.value = e.detail.value;
		store.SET_FORM_DATA('category', tabArray.value[tabIndex.value].value);
	}

	// 格式化数字
	const formatDigit = (e, field) => {
		const value = parseFloat(e.detail.value).toFixed(2);
		formData.value[field] = isNaN(value) ? '' : value;
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 55rpx 25rpx 0;

		.content {
			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
				line-height: 1.5;
			}
		}
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding-left: 30rpx;

		&-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			font-size: 30rpx;
			color: #222222;
			padding-right: 30rpx;

			&+.list-item {
				border-top: 1rpx solid #E5E5E5;
			}

			&.show-right-icon {
				position: relative;

				&::after {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					display: block;
					content: '\e601';
					font-family: 'iconfont';
					font-size: 20rpx;
					color: #222;
				}
			}

			.label {
				flex-shrink: 0;
			}

			.input {
				flex-grow: 1;
			}

			.unit {
				flex-shrink: 0;
			}

			.picker {
				flex-grow: 1;

				.value {
					width: 100%;

					&.placeholder {
						color: #999;
					}
				}
			}
		}
	}
</style>